<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Icon（Ant的线框风格）</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_diy.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style type="text/css">
.ant-btn{
	margin-left: 20px;
}
.aut-icon{
	height: 2em;
	width: 2em;
	/* color: red; */
}
.ant-modal-confirm-body>.ant-modal-confirm-title{
	flex: auto !important;
	margin-left: 8px;
}
.icon-demo{
	display: inline-block;
	background-color: #c6e2ff;
	border: 1px solid gray;
	padding: 4px 30px;
	margin: 8px;
}
.icon-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.icon-cell{
	display: flex;
	flex-direction: column;
	width: 170px;
	height: 90px;
	border: 1px solid lightgray;
	padding: 8px 0;
}
.icon-icon{
	margin: auto;
}
.icon-text{
	margin: auto;
	color: gray;
	font-size: 12px;
}
.label{
	margin: 12px;
	font-weight: bold;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">探索使用icons_antd.js（探索成功，推荐使用）</a-divider><!-- =============================================================== -->
	<p class="desc">其实就是把antd的图标注入到icons_antd.js文件中，用icon_el的方式调用就可以了</p>
	<a-button @click="confirm4">Confirm</a-button>
	<add-location width="80" height="40"></add-location>
	<aim width="80" height="40"></aim>
	<zoom-out width="80" height="40"></zoom-out>
	<up-circle-two-tone width="80" height="40"></up-circle-two-tone>
	<right-square-two-tone width="80" height="40"></right-square-two-tone>
	
	<a-divider class="a-divi" orientation="left">测试</a-divider><!-- =============================================================== -->
	<p class="desc">研究一下官方文档的用法【用问题，图标没有转起来】</p>
	 <a-space style="margin-left: 20px;">
	    <home-outlined class="ant-icon"></home-outlined>
	    <setting-filled class="ant-icon"></setting-filled>
	    <smile-outlined class="ant-icon"></smile-outlined>
	    <sync-outlined class="ant-icon" spin></sync-outlined>
	    <smile-outlined class="ant-icon" :rotate="180"></smile-outlined>
	    <loading-outlined class="ant-icon"></loading-outlined>
	  </a-space>
	

	<a-divider class="a-divi" orientation="left">线框风格</a-divider><!-- =============================================================== -->
	<p class="desc" style="margin-top: 12px;">Antd线框风格图标</p>
	<a-affix :offset-top="top">
		<a href="icon_ant1.html"><a-button type="primary">线框风格</a-button></a>
		<a href="icon_ant2.html"><a-button>实底风格</a-button></a>
		<a href="icon_ant3.html"><a-button>双色风格</a-button></a>
		<div class="icon-demo"><p v-text="iconDemo" style="margin-top: 1em;"></p></div>
	</a-affix>
	
	<h4 class="label">方向性图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('step-backward-outlined')"><div class="icon-icon"><step-backward-outlined class="aut-icon"></step-backward-outlined></div><div class="icon-text">StepBackwardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('step-forward-outlined')"><div class="icon-icon"><step-forward-outlined class="aut-icon"></step-forward-outlined></div><div class="icon-text">StepForwardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fast-backward-outlined')"><div class="icon-icon"><fast-backward-outlined class="aut-icon"></fast-backward-outlined></div><div class="icon-text">FastBackwardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fast-forward-outlined')"><div class="icon-icon"><fast-forward-outlined class="aut-icon"></fast-forward-outlined></div><div class="icon-text">FastForwardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('shrink-outlined')"><div class="icon-icon"><shrink-outlined class="aut-icon"></shrink-outlined></div><div class="icon-text">ShrinkOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('arrows-alt-outlined')"><div class="icon-icon"><arrows-alt-outlined class="aut-icon"></arrows-alt-outlined></div><div class="icon-text">ArrowsAltOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('down-outlined')"><div class="icon-icon"><down-outlined class="aut-icon"></down-outlined></div><div class="icon-text">DownOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('up-outlined')"><div class="icon-icon"><up-outlined class="aut-icon"></up-outlined></div><div class="icon-text">UpOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('left-outlined')"><div class="icon-icon"><left-outlined class="aut-icon"></left-outlined></div><div class="icon-text">LeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('right-outlined')"><div class="icon-icon"><right-outlined class="aut-icon"></right-outlined></div><div class="icon-text">RightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('caret-up-outlined')"><div class="icon-icon"><caret-up-outlined class="aut-icon"></caret-up-outlined></div><div class="icon-text">CaretUpOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('caret-down-outlined')"><div class="icon-icon"><caret-down-outlined class="aut-icon"></caret-down-outlined></div><div class="icon-text">CaretDownOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('caret-left-outlined')"><div class="icon-icon"><caret-left-outlined class="aut-icon"></caret-left-outlined></div><div class="icon-text">CaretLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('caret-right-outlined')"><div class="icon-icon"><caret-right-outlined class="aut-icon"></caret-right-outlined></div><div class="icon-text">CaretRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('up-circle-outlined')"><div class="icon-icon"><up-circle-outlined class="aut-icon"></up-circle-outlined></div><div class="icon-text">UpCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('down-circle-outlined')"><div class="icon-icon"><down-circle-outlined class="aut-icon"></down-circle-outlined></div><div class="icon-text">DownCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('left-circle-outlined')"><div class="icon-icon"><left-circle-outlined class="aut-icon"></left-circle-outlined></div><div class="icon-text">LeftCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('right-circle-outlined')"><div class="icon-icon"><right-circle-outlined class="aut-icon"></right-circle-outlined></div><div class="icon-text">RightCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('double-right-outlined')"><div class="icon-icon"><double-right-outlined class="aut-icon"></double-right-outlined></div><div class="icon-text">DoubleRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('double-left-outlined')"><div class="icon-icon"><double-left-outlined class="aut-icon"></double-left-outlined></div><div class="icon-text">DoubleLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('vertical-left-outlined')"><div class="icon-icon"><vertical-left-outlined class="aut-icon"></vertical-left-outlined></div><div class="icon-text">VerticalLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('vertical-right-outlined')"><div class="icon-icon"><vertical-right-outlined class="aut-icon"></vertical-right-outlined></div><div class="icon-text">VerticalRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('vertical-align-top-outlined')"><div class="icon-icon"><vertical-align-top-outlined class="aut-icon"></vertical-align-top-outlined></div><div class="icon-text">VerticalAlignTopOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('vertical-align-middle-outlined')"><div class="icon-icon"><vertical-align-middle-outlined class="aut-icon"></vertical-align-middle-outlined></div><div class="icon-text">VerticalAlignMiddleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('vertical-align-bottom-outlined')"><div class="icon-icon"><vertical-align-bottom-outlined class="aut-icon"></vertical-align-bottom-outlined></div><div class="icon-text">VerticalAlignBottomOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('forward-outlined')"><div class="icon-icon"><forward-outlined class="aut-icon"></forward-outlined></div><div class="icon-text">ForwardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('backward-outlined')"><div class="icon-icon"><backward-outlined class="aut-icon"></backward-outlined></div><div class="icon-text">BackwardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('rollback-outlined')"><div class="icon-icon"><rollback-outlined class="aut-icon"></rollback-outlined></div><div class="icon-text">RollbackOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('enter-outlined')"><div class="icon-icon"><enter-outlined class="aut-icon"></enter-outlined></div><div class="icon-text">EnterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('retweet-outlined')"><div class="icon-icon"><retweet-outlined class="aut-icon"></retweet-outlined></div><div class="icon-text">RetweetOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('swap-outlined')"><div class="icon-icon"><swap-outlined class="aut-icon"></swap-outlined></div><div class="icon-text">SwapOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('swap-left-outlined')"><div class="icon-icon"><swap-left-outlined class="aut-icon"></swap-left-outlined></div><div class="icon-text">SwapLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('swap-right-outlined')"><div class="icon-icon"><swap-right-outlined class="aut-icon"></swap-right-outlined></div><div class="icon-text">SwapRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-up-outlined')"><div class="icon-icon"><arrow-up-outlined class="aut-icon"></arrow-up-outlined></div><div class="icon-text">ArrowUpOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-down-outlined')"><div class="icon-icon"><arrow-down-outlined class="aut-icon"></arrow-down-outlined></div><div class="icon-text">ArrowDownOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-left-outlined')"><div class="icon-icon"><arrow-left-outlined class="aut-icon"></arrow-left-outlined></div><div class="icon-text">ArrowLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-right-outlined')"><div class="icon-icon"><arrow-right-outlined class="aut-icon"></arrow-right-outlined></div><div class="icon-text">ArrowRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('play-circle-outlined')"><div class="icon-icon"><play-circle-outlined class="aut-icon"></play-circle-outlined></div><div class="icon-text">PlayCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('up-square-outlined')"><div class="icon-icon"><up-square-outlined class="aut-icon"></up-square-outlined></div><div class="icon-text">UpSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('down-square-outlined')"><div class="icon-icon"><down-square-outlined class="aut-icon"></down-square-outlined></div><div class="icon-text">DownSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('left-square-outlined')"><div class="icon-icon"><left-square-outlined class="aut-icon"></left-square-outlined></div><div class="icon-text">LeftSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('right-square-outlined')"><div class="icon-icon"><right-square-outlined class="aut-icon"></right-square-outlined></div><div class="icon-text">RightSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('login-outlined')"><div class="icon-icon"><login-outlined class="aut-icon"></login-outlined></div><div class="icon-text">LoginOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('logout-outlined')"><div class="icon-icon"><logout-outlined class="aut-icon"></logout-outlined></div><div class="icon-text">LogoutOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('menu-fold-outlined')"><div class="icon-icon"><menu-fold-outlined class="aut-icon"></menu-fold-outlined></div><div class="icon-text">MenuFoldOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('menu-unfold-outlined')"><div class="icon-icon"><menu-unfold-outlined class="aut-icon"></menu-unfold-outlined></div><div class="icon-text">MenuUnfoldOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-bottom-outlined')"><div class="icon-icon"><border-bottom-outlined class="aut-icon"></border-bottom-outlined></div><div class="icon-text">BorderBottomOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-horizontal-outlined')"><div class="icon-icon"><border-horizontal-outlined class="aut-icon"></border-horizontal-outlined></div><div class="icon-text">BorderHorizontalOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-inner-outlined')"><div class="icon-icon"><border-inner-outlined class="aut-icon"></border-inner-outlined></div><div class="icon-text">BorderInnerOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-outer-outlined')"><div class="icon-icon"><border-outer-outlined class="aut-icon"></border-outer-outlined></div><div class="icon-text">BorderOuterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-left-outlined')"><div class="icon-icon"><border-left-outlined class="aut-icon"></border-left-outlined></div><div class="icon-text">BorderLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-right-outlined')"><div class="icon-icon"><border-right-outlined class="aut-icon"></border-right-outlined></div><div class="icon-text">BorderRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-top-outlined')"><div class="icon-icon"><border-top-outlined class="aut-icon"></border-top-outlined></div><div class="icon-text">BorderTopOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-verticle-outlined')"><div class="icon-icon"><border-verticle-outlined class="aut-icon"></border-verticle-outlined></div><div class="icon-text">BorderVerticleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pic-center-outlined')"><div class="icon-icon"><pic-center-outlined class="aut-icon"></pic-center-outlined></div><div class="icon-text">PicCenterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pic-left-outlined')"><div class="icon-icon"><pic-left-outlined class="aut-icon"></pic-left-outlined></div><div class="icon-text">PicLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pic-right-outlined')"><div class="icon-icon"><pic-right-outlined class="aut-icon"></pic-right-outlined></div><div class="icon-text">PicRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('radius-bottomleft-outlined')"><div class="icon-icon"><radius-bottomleft-outlined class="aut-icon"></radius-bottomleft-outlined></div><div class="icon-text">RadiusBottomleftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('radius-bottomright-outlined')"><div class="icon-icon"><radius-bottomright-outlined class="aut-icon"></radius-bottomright-outlined></div><div class="icon-text">RadiusBottomrightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('radius-upleft-outlined')"><div class="icon-icon"><radius-upleft-outlined class="aut-icon"></radius-upleft-outlined></div><div class="icon-text">RadiusUpleftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('radius-upright-outlined')"><div class="icon-icon"><radius-upright-outlined class="aut-icon"></radius-upright-outlined></div><div class="icon-text">RadiusUprightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fullscreen-outlined')"><div class="icon-icon"><fullscreen-outlined class="aut-icon"></fullscreen-outlined></div><div class="icon-text">FullscreenOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fullscreen-exit-outlined')"><div class="icon-icon"><fullscreen-exit-outlined class="aut-icon"></fullscreen-exit-outlined></div><div class="icon-text">FullscreenExitOutlined</div></div>
	</div>
	
	<h4 class="label">提示建议性图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('question-outlined')"><div class="icon-icon"><question-outlined class="aut-icon"></question-outlined></div><div class="icon-text">QuestionOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('question-circle-outlined')"><div class="icon-icon"><question-circle-outlined class="aut-icon"></question-circle-outlined></div><div class="icon-text">QuestionCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('plus-outlined')"><div class="icon-icon"><plus-outlined class="aut-icon"></plus-outlined></div><div class="icon-text">PlusOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('plus-circle-outlined')"><div class="icon-icon"><plus-circle-outlined class="aut-icon"></plus-circle-outlined></div><div class="icon-text">PlusCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pause-outlined')"><div class="icon-icon"><pause-outlined class="aut-icon"></pause-outlined></div><div class="icon-text">PauseOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pause-circle-outlined')"><div class="icon-icon"><pause-circle-outlined class="aut-icon"></pause-circle-outlined></div><div class="icon-text">PauseCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('minus-outlined')"><div class="icon-icon"><minus-outlined class="aut-icon"></minus-outlined></div><div class="icon-text">MinusOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('minus-circle-outlined')"><div class="icon-icon"><minus-circle-outlined class="aut-icon"></minus-circle-outlined></div><div class="icon-text">MinusCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('plus-square-outlined')"><div class="icon-icon"><plus-square-outlined class="aut-icon"></plus-square-outlined></div><div class="icon-text">PlusSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('minus-square-outlined')"><div class="icon-icon"><minus-square-outlined class="aut-icon"></minus-square-outlined></div><div class="icon-text">MinusSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('info-outlined')"><div class="icon-icon"><info-outlined class="aut-icon"></info-outlined></div><div class="icon-text">InfoOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('info-circle-outlined')"><div class="icon-icon"><info-circle-outlined class="aut-icon"></info-circle-outlined></div><div class="icon-text">InfoCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('exclamation-outlined')"><div class="icon-icon"><exclamation-outlined class="aut-icon"></exclamation-outlined></div><div class="icon-text">ExclamationOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('exclamation-circle-outlined')"><div class="icon-icon"><exclamation-circle-outlined class="aut-icon"></exclamation-circle-outlined></div><div class="icon-text">ExclamationCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('close-outlined')"><div class="icon-icon"><close-outlined class="aut-icon"></close-outlined></div><div class="icon-text">CloseOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('close-circle-outlined')"><div class="icon-icon"><close-circle-outlined class="aut-icon"></close-circle-outlined></div><div class="icon-text">CloseCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('close-square-outlined')"><div class="icon-icon"><close-square-outlined class="aut-icon"></close-square-outlined></div><div class="icon-text">CloseSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('check-outlined')"><div class="icon-icon"><check-outlined class="aut-icon"></check-outlined></div><div class="icon-text">CheckOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('check-circle-outlined')"><div class="icon-icon"><check-circle-outlined class="aut-icon"></check-circle-outlined></div><div class="icon-text">CheckCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('check-square-outlined')"><div class="icon-icon"><check-square-outlined class="aut-icon"></check-square-outlined></div><div class="icon-text">CheckSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('clock-circle-outlined')"><div class="icon-icon"><clock-circle-outlined class="aut-icon"></clock-circle-outlined></div><div class="icon-text">ClockCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('warning-outlined')"><div class="icon-icon"><warning-outlined class="aut-icon"></warning-outlined></div><div class="icon-text">WarningOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('issues-close-outlined')"><div class="icon-icon"><issues-close-outlined class="aut-icon"></issues-close-outlined></div><div class="icon-text">IssuesCloseOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('stop-outlined')"><div class="icon-icon"><stop-outlined class="aut-icon"></stop-outlined></div><div class="icon-text">StopOutlined</div></div>
	</div>
	
	<h4 class="label">编辑类图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('edit-outlined')"><div class="icon-icon"><edit-outlined class="aut-icon"></edit-outlined></div><div class="icon-text">EditOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('form-outlined')"><div class="icon-icon"><form-outlined class="aut-icon"></form-outlined></div><div class="icon-text">FormOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('copy-outlined')"><div class="icon-icon"><copy-outlined class="aut-icon"></copy-outlined></div><div class="icon-text">CopyOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('scissor-outlined')"><div class="icon-icon"><scissor-outlined class="aut-icon"></scissor-outlined></div><div class="icon-text">ScissorOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('delete-outlined')"><div class="icon-icon"><delete-outlined class="aut-icon"></delete-outlined></div><div class="icon-text">DeleteOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('snippets-outlined')"><div class="icon-icon"><snippets-outlined class="aut-icon"></snippets-outlined></div><div class="icon-text">SnippetsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('diff-outlined')"><div class="icon-icon"><diff-outlined class="aut-icon"></diff-outlined></div><div class="icon-text">DiffOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('highlight-outlined')"><div class="icon-icon"><highlight-outlined class="aut-icon"></highlight-outlined></div><div class="icon-text">HighlightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('align-center-outlined')"><div class="icon-icon"><align-center-outlined class="aut-icon"></align-center-outlined></div><div class="icon-text">AlignCenterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('align-left-outlined')"><div class="icon-icon"><align-left-outlined class="aut-icon"></align-left-outlined></div><div class="icon-text">AlignLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('align-right-outlined')"><div class="icon-icon"><align-right-outlined class="aut-icon"></align-right-outlined></div><div class="icon-text">AlignRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bg-colors-outlined')"><div class="icon-icon"><bg-colors-outlined class="aut-icon"></bg-colors-outlined></div><div class="icon-text">BgColorsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bold-outlined')"><div class="icon-icon"><bold-outlined class="aut-icon"></bold-outlined></div><div class="icon-text">BoldOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('italic-outlined')"><div class="icon-icon"><italic-outlined class="aut-icon"></italic-outlined></div><div class="icon-text">ItalicOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('underline-outlined')"><div class="icon-icon"><underline-outlined class="aut-icon"></underline-outlined></div><div class="icon-text">UnderlineOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('strikethrough-outlined')"><div class="icon-icon"><strikethrough-outlined class="aut-icon"></strikethrough-outlined></div><div class="icon-text">StrikethroughOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('redo-outlined')"><div class="icon-icon"><redo-outlined class="aut-icon"></redo-outlined></div><div class="icon-text">RedoOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('undo-outlined')"><div class="icon-icon"><undo-outlined class="aut-icon"></undo-outlined></div><div class="icon-text">UndoOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('zoom-in-outlined')"><div class="icon-icon"><zoom-in-outlined class="aut-icon"></zoom-in-outlined></div><div class="icon-text">ZoomInOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('zoom-out-outlined')"><div class="icon-icon"><zoom-out-outlined class="aut-icon"></zoom-out-outlined></div><div class="icon-text">ZoomOutOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('font-colors-outlined')"><div class="icon-icon"><font-colors-outlined class="aut-icon"></font-colors-outlined></div><div class="icon-text">FontColorsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('font-size-outlined')"><div class="icon-icon"><font-size-outlined class="aut-icon"></font-size-outlined></div><div class="icon-text">FontSizeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('line-height-outlined')"><div class="icon-icon"><line-height-outlined class="aut-icon"></line-height-outlined></div><div class="icon-text">LineHeightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dash-outlined')"><div class="icon-icon"><dash-outlined class="aut-icon"></dash-outlined></div><div class="icon-text">DashOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('small-dash-outlined')"><div class="icon-icon"><small-dash-outlined class="aut-icon"></small-dash-outlined></div><div class="icon-text">SmallDashOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('sort-ascending-outlined')"><div class="icon-icon"><sort-ascending-outlined class="aut-icon"></sort-ascending-outlined></div><div class="icon-text">SortAscendingOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('sort-descending-outlined')"><div class="icon-icon"><sort-descending-outlined class="aut-icon"></sort-descending-outlined></div><div class="icon-text">SortDescendingOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('drag-outlined')"><div class="icon-icon"><drag-outlined class="aut-icon"></drag-outlined></div><div class="icon-text">DragOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ordered-list-outlined')"><div class="icon-icon"><ordered-list-outlined class="aut-icon"></ordered-list-outlined></div><div class="icon-text">OrderedListOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('unordered-list-outlined')"><div class="icon-icon"><unordered-list-outlined class="aut-icon"></unordered-list-outlined></div><div class="icon-text">UnorderedListOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('radius-setting-outlined')"><div class="icon-icon"><radius-setting-outlined class="aut-icon"></radius-setting-outlined></div><div class="icon-text">RadiusSettingOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('column-width-outlined')"><div class="icon-icon"><column-width-outlined class="aut-icon"></column-width-outlined></div><div class="icon-text">ColumnWidthOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('column-height-outlined')"><div class="icon-icon"><column-height-outlined class="aut-icon"></column-height-outlined></div><div class="icon-text">ColumnHeightOutlined</div></div>
	</div>
	
	<h4 class="label">数据类图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('area-chart-outlined')"><div class="icon-icon"><area-chart-outlined class="aut-icon"></area-chart-outlined></div><div class="icon-text">AreaChartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pie-chart-outlined')"><div class="icon-icon"><pie-chart-outlined class="aut-icon"></pie-chart-outlined></div><div class="icon-text">PieChartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bar-chart-outlined')"><div class="icon-icon"><bar-chart-outlined class="aut-icon"></bar-chart-outlined></div><div class="icon-text">BarChartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dot-chart-outlined')"><div class="icon-icon"><dot-chart-outlined class="aut-icon"></dot-chart-outlined></div><div class="icon-text">DotChartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('line-chart-outlined')"><div class="icon-icon"><line-chart-outlined class="aut-icon"></line-chart-outlined></div><div class="icon-text">LineChartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('radar-chart-outlined')"><div class="icon-icon"><radar-chart-outlined class="aut-icon"></radar-chart-outlined></div><div class="icon-text">RadarChartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('heat-map-outlined')"><div class="icon-icon"><heat-map-outlined class="aut-icon"></heat-map-outlined></div><div class="icon-text">HeatMapOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fall-outlined')"><div class="icon-icon"><fall-outlined class="aut-icon"></fall-outlined></div><div class="icon-text">FallOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('rise-outlined')"><div class="icon-icon"><rise-outlined class="aut-icon"></rise-outlined></div><div class="icon-text">RiseOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('stock-outlined')"><div class="icon-icon"><stock-outlined class="aut-icon"></stock-outlined></div><div class="icon-text">StockOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('box-plot-outlined')"><div class="icon-icon"><box-plot-outlined class="aut-icon"></box-plot-outlined></div><div class="icon-text">BoxPlotOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fund-outlined')"><div class="icon-icon"><fund-outlined class="aut-icon"></fund-outlined></div><div class="icon-text">FundOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('sliders-outlined')"><div class="icon-icon"><sliders-outlined class="aut-icon"></sliders-outlined></div><div class="icon-text">SlidersOutlined</div></div>
	</div>
	
	<h4 class="label">品牌和标识</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('android-outlined')"><div class="icon-icon"><android-outlined class="aut-icon"></android-outlined></div><div class="icon-text">AndroidOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('apple-outlined')"><div class="icon-icon"><apple-outlined class="aut-icon"></apple-outlined></div><div class="icon-text">AppleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('windows-outlined')"><div class="icon-icon"><windows-outlined class="aut-icon"></windows-outlined></div><div class="icon-text">WindowsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ie-outlined')"><div class="icon-icon"><ie-outlined class="aut-icon"></ie-outlined></div><div class="icon-text">IeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('chrome-outlined')"><div class="icon-icon"><chrome-outlined class="aut-icon"></chrome-outlined></div><div class="icon-text">ChromeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('github-outlined')"><div class="icon-icon"><github-outlined class="aut-icon"></github-outlined></div><div class="icon-text">GithubOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('aliwangwang-outlined')"><div class="icon-icon"><aliwangwang-outlined class="aut-icon"></aliwangwang-outlined></div><div class="icon-text">AliwangwangOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dingding-outlined')"><div class="icon-icon"><dingding-outlined class="aut-icon"></dingding-outlined></div><div class="icon-text">DingdingOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('weibo-square-outlined')"><div class="icon-icon"><weibo-square-outlined class="aut-icon"></weibo-square-outlined></div><div class="icon-text">WeiboSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('weibo-circle-outlined')"><div class="icon-icon"><weibo-circle-outlined class="aut-icon"></weibo-circle-outlined></div><div class="icon-text">WeiboCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('taobao-circle-outlined')"><div class="icon-icon"><taobao-circle-outlined class="aut-icon"></taobao-circle-outlined></div><div class="icon-text">TaobaoCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('html-5-outlined')"><div class="icon-icon"><html-5-outlined class="aut-icon"></html-5-outlined></div><div class="icon-text">Html5Outlined</div></div>
		<div class="icon-cell" @click="clickIcon('weibo-outlined')"><div class="icon-icon"><weibo-outlined class="aut-icon"></weibo-outlined></div><div class="icon-text">WeiboOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('twitter-outlined')"><div class="icon-icon"><twitter-outlined class="aut-icon"></twitter-outlined></div><div class="icon-text">TwitterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('wechat-outlined')"><div class="icon-icon"><wechat-outlined class="aut-icon"></wechat-outlined></div><div class="icon-text">WechatOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('youtube-outlined')"><div class="icon-icon"><youtube-outlined class="aut-icon"></youtube-outlined></div><div class="icon-text">YoutubeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('alipay-circle-outlined')"><div class="icon-icon"><alipay-circle-outlined class="aut-icon"></alipay-circle-outlined></div><div class="icon-text">AlipayCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('taobao-outlined')"><div class="icon-icon"><taobao-outlined class="aut-icon"></taobao-outlined></div><div class="icon-text">TaobaoOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('skype-outlined')"><div class="icon-icon"><skype-outlined class="aut-icon"></skype-outlined></div><div class="icon-text">SkypeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('qq-outlined')"><div class="icon-icon"><qq-outlined class="aut-icon"></qq-outlined></div><div class="icon-text">QqOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('medium-workmark-outlined')"><div class="icon-icon"><medium-workmark-outlined class="aut-icon"></medium-workmark-outlined></div><div class="icon-text">MediumWorkmarkOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('gitlab-outlined')"><div class="icon-icon"><gitlab-outlined class="aut-icon"></gitlab-outlined></div><div class="icon-text">GitlabOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('medium-outlined')"><div class="icon-icon"><medium-outlined class="aut-icon"></medium-outlined></div><div class="icon-text">MediumOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('linkedin-outlined')"><div class="icon-icon"><linkedin-outlined class="aut-icon"></linkedin-outlined></div><div class="icon-text">LinkedinOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('google-plus-outlined')"><div class="icon-icon"><google-plus-outlined class="aut-icon"></google-plus-outlined></div><div class="icon-text">GooglePlusOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dropbox-outlined')"><div class="icon-icon"><dropbox-outlined class="aut-icon"></dropbox-outlined></div><div class="icon-text">DropboxOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('facebook-outlined')"><div class="icon-icon"><facebook-outlined class="aut-icon"></facebook-outlined></div><div class="icon-text">FacebookOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('codepen-outlined')"><div class="icon-icon"><codepen-outlined class="aut-icon"></codepen-outlined></div><div class="icon-text">CodepenOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('code-sandbox-outlined')"><div class="icon-icon"><code-sandbox-outlined class="aut-icon"></code-sandbox-outlined></div><div class="icon-text">CodeSandboxOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('amazon-outlined')"><div class="icon-icon"><amazon-outlined class="aut-icon"></amazon-outlined></div><div class="icon-text">AmazonOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('google-outlined')"><div class="icon-icon"><google-outlined class="aut-icon"></google-outlined></div><div class="icon-text">GoogleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('codepen-circle-outlined')"><div class="icon-icon"><codepen-circle-outlined class="aut-icon"></codepen-circle-outlined></div><div class="icon-text">CodepenCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('alipay-outlined')"><div class="icon-icon"><alipay-outlined class="aut-icon"></alipay-outlined></div><div class="icon-text">AlipayOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ant-design-outlined')"><div class="icon-icon"><ant-design-outlined class="aut-icon"></ant-design-outlined></div><div class="icon-text">AntDesignOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ant-cloud-outlined')"><div class="icon-icon"><ant-cloud-outlined class="aut-icon"></ant-cloud-outlined></div><div class="icon-text">AntCloudOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('aliyun-outlined')"><div class="icon-icon"><aliyun-outlined class="aut-icon"></aliyun-outlined></div><div class="icon-text">AliyunOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('zhihu-outlined')"><div class="icon-icon"><zhihu-outlined class="aut-icon"></zhihu-outlined></div><div class="icon-text">ZhihuOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('slack-outlined')"><div class="icon-icon"><slack-outlined class="aut-icon"></slack-outlined></div><div class="icon-text">SlackOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('slack-square-outlined')"><div class="icon-icon"><slack-square-outlined class="aut-icon"></slack-square-outlined></div><div class="icon-text">SlackSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('behance-outlined')"><div class="icon-icon"><behance-outlined class="aut-icon"></behance-outlined></div><div class="icon-text">BehanceOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('behance-square-outlined')"><div class="icon-icon"><behance-square-outlined class="aut-icon"></behance-square-outlined></div><div class="icon-text">BehanceSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dribbble-outlined')"><div class="icon-icon"><dribbble-outlined class="aut-icon"></dribbble-outlined></div><div class="icon-text">DribbbleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dribbble-square-outlined')"><div class="icon-icon"><dribbble-square-outlined class="aut-icon"></dribbble-square-outlined></div><div class="icon-text">DribbbleSquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('instagram-outlined')"><div class="icon-icon"><instagram-outlined class="aut-icon"></instagram-outlined></div><div class="icon-text">InstagramOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('yuque-outlined')"><div class="icon-icon"><yuque-outlined class="aut-icon"></yuque-outlined></div><div class="icon-text">YuqueOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('alibaba-outlined')"><div class="icon-icon"><alibaba-outlined class="aut-icon"></alibaba-outlined></div><div class="icon-text">AlibabaOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('yahoo-outlined')"><div class="icon-icon"><yahoo-outlined class="aut-icon"></yahoo-outlined></div><div class="icon-text">YahooOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('reddit-outlined')"><div class="icon-icon"><reddit-outlined class="aut-icon"></reddit-outlined></div><div class="icon-text">RedditOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('sketch-outlined')"><div class="icon-icon"><sketch-outlined class="aut-icon"></sketch-outlined></div><div class="icon-text">SketchOutlined</div></div>
	</div>
	
	<h4 class="label">网站通用图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('account-book-outlined')"><div class="icon-icon"><account-book-outlined class="aut-icon"></account-book-outlined></div><div class="icon-text">AccountBookOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('aim-outlined')"><div class="icon-icon"><aim-outlined class="aut-icon"></aim-outlined></div><div class="icon-text">AimOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('alert-outlined')"><div class="icon-icon"><alert-outlined class="aut-icon"></alert-outlined></div><div class="icon-text">AlertOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('apartment-outlined')"><div class="icon-icon"><apartment-outlined class="aut-icon"></apartment-outlined></div><div class="icon-text">ApartmentOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('api-outlined')"><div class="icon-icon"><api-outlined class="aut-icon"></api-outlined></div><div class="icon-text">ApiOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('appstore-add-outlined')"><div class="icon-icon"><appstore-add-outlined class="aut-icon"></appstore-add-outlined></div><div class="icon-text">AppstoreAddOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('appstore-outlined')"><div class="icon-icon"><appstore-outlined class="aut-icon"></appstore-outlined></div><div class="icon-text">AppstoreOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('audio-outlined')"><div class="icon-icon"><audio-outlined class="aut-icon"></audio-outlined></div><div class="icon-text">AudioOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('audio-muted-outlined')"><div class="icon-icon"><audio-muted-outlined class="aut-icon"></audio-muted-outlined></div><div class="icon-text">AudioMutedOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('audit-outlined')"><div class="icon-icon"><audit-outlined class="aut-icon"></audit-outlined></div><div class="icon-text">AuditOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bank-outlined')"><div class="icon-icon"><bank-outlined class="aut-icon"></bank-outlined></div><div class="icon-text">BankOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('barcode-outlined')"><div class="icon-icon"><barcode-outlined class="aut-icon"></barcode-outlined></div><div class="icon-text">BarcodeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bars-outlined')"><div class="icon-icon"><bars-outlined class="aut-icon"></bars-outlined></div><div class="icon-text">BarsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bell-outlined')"><div class="icon-icon"><bell-outlined class="aut-icon"></bell-outlined></div><div class="icon-text">BellOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('block-outlined')"><div class="icon-icon"><block-outlined class="aut-icon"></block-outlined></div><div class="icon-text">BlockOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('book-outlined')"><div class="icon-icon"><book-outlined class="aut-icon"></book-outlined></div><div class="icon-text">BookOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('border-outlined')"><div class="icon-icon"><border-outlined class="aut-icon"></border-outlined></div><div class="icon-text">BorderOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('borderless-table-outlined')"><div class="icon-icon"><borderless-table-outlined class="aut-icon"></borderless-table-outlined></div><div class="icon-text">BorderlessTableOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('branches-outlined')"><div class="icon-icon"><branches-outlined class="aut-icon"></branches-outlined></div><div class="icon-text">BranchesOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bug-outlined')"><div class="icon-icon"><bug-outlined class="aut-icon"></bug-outlined></div><div class="icon-text">BugOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('build-outlined')"><div class="icon-icon"><build-outlined class="aut-icon"></build-outlined></div><div class="icon-text">BuildOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('bulb-outlined')"><div class="icon-icon"><bulb-outlined class="aut-icon"></bulb-outlined></div><div class="icon-text">BulbOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('calculator-outlined')"><div class="icon-icon"><calculator-outlined class="aut-icon"></calculator-outlined></div><div class="icon-text">CalculatorOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('calendar-outlined')"><div class="icon-icon"><calendar-outlined class="aut-icon"></calendar-outlined></div><div class="icon-text">CalendarOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('camera-outlined')"><div class="icon-icon"><camera-outlined class="aut-icon"></camera-outlined></div><div class="icon-text">CameraOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('car-outlined')"><div class="icon-icon"><car-outlined class="aut-icon"></car-outlined></div><div class="icon-text">CarOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('carry-out-outlined')"><div class="icon-icon"><carry-out-outlined class="aut-icon"></carry-out-outlined></div><div class="icon-text">CarryOutOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ci-circle-outlined')"><div class="icon-icon"><ci-circle-outlined class="aut-icon"></ci-circle-outlined></div><div class="icon-text">CiCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ci-outlined')"><div class="icon-icon"><ci-outlined class="aut-icon"></ci-outlined></div><div class="icon-text">CiOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('clear-outlined')"><div class="icon-icon"><clear-outlined class="aut-icon"></clear-outlined></div><div class="icon-text">ClearOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('cloud-download-outlined')"><div class="icon-icon"><cloud-download-outlined class="aut-icon"></cloud-download-outlined></div><div class="icon-text">CloudDownloadOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('cloud-outlined')"><div class="icon-icon"><cloud-outlined class="aut-icon"></cloud-outlined></div><div class="icon-text">CloudOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('cloud-server-outlined')"><div class="icon-icon"><cloud-server-outlined class="aut-icon"></cloud-server-outlined></div><div class="icon-text">CloudServerOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('cloud-sync-outlined')"><div class="icon-icon"><cloud-sync-outlined class="aut-icon"></cloud-sync-outlined></div><div class="icon-text">CloudSyncOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('cloud-upload-outlined')"><div class="icon-icon"><cloud-upload-outlined class="aut-icon"></cloud-upload-outlined></div><div class="icon-text">CloudUploadOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('cluster-outlined')"><div class="icon-icon"><cluster-outlined class="aut-icon"></cluster-outlined></div><div class="icon-text">ClusterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('code-outlined')"><div class="icon-icon"><code-outlined class="aut-icon"></code-outlined></div><div class="icon-text">CodeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('coffee-outlined')"><div class="icon-icon"><coffee-outlined class="aut-icon"></coffee-outlined></div><div class="icon-text">CoffeeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('comment-outlined')"><div class="icon-icon"><comment-outlined class="aut-icon"></comment-outlined></div><div class="icon-text">CommentOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('compass-outlined')"><div class="icon-icon"><compass-outlined class="aut-icon"></compass-outlined></div><div class="icon-text">CompassOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('compress-outlined')"><div class="icon-icon"><compress-outlined class="aut-icon"></compress-outlined></div><div class="icon-text">CompressOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('console-sql-outlined')"><div class="icon-icon"><console-sql-outlined class="aut-icon"></console-sql-outlined></div><div class="icon-text">ConsoleSqlOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('contacts-outlined')"><div class="icon-icon"><contacts-outlined class="aut-icon"></contacts-outlined></div><div class="icon-text">ContactsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('container-outlined')"><div class="icon-icon"><container-outlined class="aut-icon"></container-outlined></div><div class="icon-text">ContainerOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('control-outlined')"><div class="icon-icon"><control-outlined class="aut-icon"></control-outlined></div><div class="icon-text">ControlOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('copyright-circle-outlined')"><div class="icon-icon"><copyright-circle-outlined class="aut-icon"></copyright-circle-outlined></div><div class="icon-text">CopyrightCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('copyright-outlined')"><div class="icon-icon"><copyright-outlined class="aut-icon"></copyright-outlined></div><div class="icon-text">CopyrightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('credit-card-outlined')"><div class="icon-icon"><credit-card-outlined class="aut-icon"></credit-card-outlined></div><div class="icon-text">CreditCardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('crown-outlined')"><div class="icon-icon"><crown-outlined class="aut-icon"></crown-outlined></div><div class="icon-text">CrownOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('customer-service-outlined')"><div class="icon-icon"><customer-service-outlined class="aut-icon"></customer-service-outlined></div><div class="icon-text">CustomerServiceOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dashboard-outlined')"><div class="icon-icon"><dashboard-outlined class="aut-icon"></dashboard-outlined></div><div class="icon-text">DashboardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('database-outlined')"><div class="icon-icon"><database-outlined class="aut-icon"></database-outlined></div><div class="icon-text">DatabaseOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('delete-column-outlined')"><div class="icon-icon"><delete-column-outlined class="aut-icon"></delete-column-outlined></div><div class="icon-text">DeleteColumnOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('delete-row-outlined')"><div class="icon-icon"><delete-row-outlined class="aut-icon"></delete-row-outlined></div><div class="icon-text">DeleteRowOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('delivered-procedure-outlined')"><div class="icon-icon"><delivered-procedure-outlined class="aut-icon"></delivered-procedure-outlined></div><div class="icon-text">DeliveredProcedureOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('deployment-unit-outlined')"><div class="icon-icon"><deployment-unit-outlined class="aut-icon"></deployment-unit-outlined></div><div class="icon-text">DeploymentUnitOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('desktop-outlined')"><div class="icon-icon"><desktop-outlined class="aut-icon"></desktop-outlined></div><div class="icon-text">DesktopOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dingtalk-outlined')"><div class="icon-icon"><dingtalk-outlined class="aut-icon"></dingtalk-outlined></div><div class="icon-text">DingtalkOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('disconnect-outlined')"><div class="icon-icon"><disconnect-outlined class="aut-icon"></disconnect-outlined></div><div class="icon-text">DisconnectOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dislike-outlined')"><div class="icon-icon"><dislike-outlined class="aut-icon"></dislike-outlined></div><div class="icon-text">DislikeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dollar-circle-outlined')"><div class="icon-icon"><dollar-circle-outlined class="aut-icon"></dollar-circle-outlined></div><div class="icon-text">DollarCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('dollar-outlined')"><div class="icon-icon"><dollar-outlined class="aut-icon"></dollar-outlined></div><div class="icon-text">DollarOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('download-outlined')"><div class="icon-icon"><download-outlined class="aut-icon"></download-outlined></div><div class="icon-text">DownloadOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ellipsis-outlined')"><div class="icon-icon"><ellipsis-outlined class="aut-icon"></ellipsis-outlined></div><div class="icon-text">EllipsisOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('environment-outlined')"><div class="icon-icon"><environment-outlined class="aut-icon"></environment-outlined></div><div class="icon-text">EnvironmentOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('euro-circle-outlined')"><div class="icon-icon"><euro-circle-outlined class="aut-icon"></euro-circle-outlined></div><div class="icon-text">EuroCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('euro-outlined')"><div class="icon-icon"><euro-outlined class="aut-icon"></euro-outlined></div><div class="icon-text">EuroOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('exception-outlined')"><div class="icon-icon"><exception-outlined class="aut-icon"></exception-outlined></div><div class="icon-text">ExceptionOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('expand-alt-outlined')"><div class="icon-icon"><expand-alt-outlined class="aut-icon"></expand-alt-outlined></div><div class="icon-text">ExpandAltOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('expand-outlined')"><div class="icon-icon"><expand-outlined class="aut-icon"></expand-outlined></div><div class="icon-text">ExpandOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('experiment-outlined')"><div class="icon-icon"><experiment-outlined class="aut-icon"></experiment-outlined></div><div class="icon-text">ExperimentOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('export-outlined')"><div class="icon-icon"><export-outlined class="aut-icon"></export-outlined></div><div class="icon-text">ExportOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('eye-outlined')"><div class="icon-icon"><eye-outlined class="aut-icon"></eye-outlined></div><div class="icon-text">EyeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('eye-invisible-outlined')"><div class="icon-icon"><eye-invisible-outlined class="aut-icon"></eye-invisible-outlined></div><div class="icon-text">EyeInvisibleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('field-binary-outlined')"><div class="icon-icon"><field-binary-outlined class="aut-icon"></field-binary-outlined></div><div class="icon-text">FieldBinaryOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('field-number-outlined')"><div class="icon-icon"><field-number-outlined class="aut-icon"></field-number-outlined></div><div class="icon-text">FieldNumberOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('field-string-outlined')"><div class="icon-icon"><field-string-outlined class="aut-icon"></field-string-outlined></div><div class="icon-text">FieldStringOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('field-time-outlined')"><div class="icon-icon"><field-time-outlined class="aut-icon"></field-time-outlined></div><div class="icon-text">FieldTimeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-add-outlined')"><div class="icon-icon"><file-add-outlined class="aut-icon"></file-add-outlined></div><div class="icon-text">FileAddOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-done-outlined')"><div class="icon-icon"><file-done-outlined class="aut-icon"></file-done-outlined></div><div class="icon-text">FileDoneOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-excel-outlined')"><div class="icon-icon"><file-excel-outlined class="aut-icon"></file-excel-outlined></div><div class="icon-text">FileExcelOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-exclamation-outlined')"><div class="icon-icon"><file-exclamation-outlined class="aut-icon"></file-exclamation-outlined></div><div class="icon-text">FileExclamationOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-outlined')"><div class="icon-icon"><file-outlined class="aut-icon"></file-outlined></div><div class="icon-text">FileOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-gif-outlined')"><div class="icon-icon"><file-gif-outlined class="aut-icon"></file-gif-outlined></div><div class="icon-text">FileGifOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-image-outlined')"><div class="icon-icon"><file-image-outlined class="aut-icon"></file-image-outlined></div><div class="icon-text">FileImageOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-jpg-outlined')"><div class="icon-icon"><file-jpg-outlined class="aut-icon"></file-jpg-outlined></div><div class="icon-text">FileJpgOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-markdown-outlined')"><div class="icon-icon"><file-markdown-outlined class="aut-icon"></file-markdown-outlined></div><div class="icon-text">FileMarkdownOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-pdf-outlined')"><div class="icon-icon"><file-pdf-outlined class="aut-icon"></file-pdf-outlined></div><div class="icon-text">FilePdfOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-ppt-outlined')"><div class="icon-icon"><file-ppt-outlined class="aut-icon"></file-ppt-outlined></div><div class="icon-text">FilePptOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-protect-outlined')"><div class="icon-icon"><file-protect-outlined class="aut-icon"></file-protect-outlined></div><div class="icon-text">FileProtectOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-search-outlined')"><div class="icon-icon"><file-search-outlined class="aut-icon"></file-search-outlined></div><div class="icon-text">FileSearchOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-sync-outlined')"><div class="icon-icon"><file-sync-outlined class="aut-icon"></file-sync-outlined></div><div class="icon-text">FileSyncOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-text-outlined')"><div class="icon-icon"><file-text-outlined class="aut-icon"></file-text-outlined></div><div class="icon-text">FileTextOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-unknown-outlined')"><div class="icon-icon"><file-unknown-outlined class="aut-icon"></file-unknown-outlined></div><div class="icon-text">FileUnknownOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-word-outlined')"><div class="icon-icon"><file-word-outlined class="aut-icon"></file-word-outlined></div><div class="icon-text">FileWordOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('file-zip-outlined')"><div class="icon-icon"><file-zip-outlined class="aut-icon"></file-zip-outlined></div><div class="icon-text">FileZipOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('filter-outlined')"><div class="icon-icon"><filter-outlined class="aut-icon"></filter-outlined></div><div class="icon-text">FilterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fire-outlined')"><div class="icon-icon"><fire-outlined class="aut-icon"></fire-outlined></div><div class="icon-text">FireOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('flag-outlined')"><div class="icon-icon"><flag-outlined class="aut-icon"></flag-outlined></div><div class="icon-text">FlagOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('folder-add-outlined')"><div class="icon-icon"><folder-add-outlined class="aut-icon"></folder-add-outlined></div><div class="icon-text">FolderAddOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('folder-outlined')"><div class="icon-icon"><folder-outlined class="aut-icon"></folder-outlined></div><div class="icon-text">FolderOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('folder-open-outlined')"><div class="icon-icon"><folder-open-outlined class="aut-icon"></folder-open-outlined></div><div class="icon-text">FolderOpenOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('folder-view-outlined')"><div class="icon-icon"><folder-view-outlined class="aut-icon"></folder-view-outlined></div><div class="icon-text">FolderViewOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fork-outlined')"><div class="icon-icon"><fork-outlined class="aut-icon"></fork-outlined></div><div class="icon-text">ForkOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('format-painter-outlined')"><div class="icon-icon"><format-painter-outlined class="aut-icon"></format-painter-outlined></div><div class="icon-text">FormatPainterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('frown-outlined')"><div class="icon-icon"><frown-outlined class="aut-icon"></frown-outlined></div><div class="icon-text">FrownOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('function-outlined')"><div class="icon-icon"><function-outlined class="aut-icon"></function-outlined></div><div class="icon-text">FunctionOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fund-projection-screen-outlined')"><div class="icon-icon"><fund-projection-screen-outlined class="aut-icon"></fund-projection-screen-outlined></div><div class="icon-text">FundProjectionScreenOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('fund-view-outlined')"><div class="icon-icon"><fund-view-outlined class="aut-icon"></fund-view-outlined></div><div class="icon-text">FundViewOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('funnel-plot-outlined')"><div class="icon-icon"><funnel-plot-outlined class="aut-icon"></funnel-plot-outlined></div><div class="icon-text">FunnelPlotOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('gateway-outlined')"><div class="icon-icon"><gateway-outlined class="aut-icon"></gateway-outlined></div><div class="icon-text">GatewayOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('gif-outlined')"><div class="icon-icon"><gif-outlined class="aut-icon"></gif-outlined></div><div class="icon-text">GifOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('gift-outlined')"><div class="icon-icon"><gift-outlined class="aut-icon"></gift-outlined></div><div class="icon-text">GiftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('global-outlined')"><div class="icon-icon"><global-outlined class="aut-icon"></global-outlined></div><div class="icon-text">GlobalOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('gold-outlined')"><div class="icon-icon"><gold-outlined class="aut-icon"></gold-outlined></div><div class="icon-text">GoldOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('group-outlined')"><div class="icon-icon"><group-outlined class="aut-icon"></group-outlined></div><div class="icon-text">GroupOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('hdd-outlined')"><div class="icon-icon"><hdd-outlined class="aut-icon"></hdd-outlined></div><div class="icon-text">HddOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('heart-outlined')"><div class="icon-icon"><heart-outlined class="aut-icon"></heart-outlined></div><div class="icon-text">HeartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('history-outlined')"><div class="icon-icon"><history-outlined class="aut-icon"></history-outlined></div><div class="icon-text">HistoryOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('holder-outlined')"><div class="icon-icon"><holder-outlined class="aut-icon"></holder-outlined></div><div class="icon-text">HolderOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('home-outlined')"><div class="icon-icon"><home-outlined class="aut-icon"></home-outlined></div><div class="icon-text">HomeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('hourglass-outlined')"><div class="icon-icon"><hourglass-outlined class="aut-icon"></hourglass-outlined></div><div class="icon-text">HourglassOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('idcard-outlined')"><div class="icon-icon"><idcard-outlined class="aut-icon"></idcard-outlined></div><div class="icon-text">IdcardOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('import-outlined')"><div class="icon-icon"><import-outlined class="aut-icon"></import-outlined></div><div class="icon-text">ImportOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('inbox-outlined')"><div class="icon-icon"><inbox-outlined class="aut-icon"></inbox-outlined></div><div class="icon-text">InboxOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('insert-row-above-outlined')"><div class="icon-icon"><insert-row-above-outlined class="aut-icon"></insert-row-above-outlined></div><div class="icon-text">InsertRowAboveOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('insert-row-below-outlined')"><div class="icon-icon"><insert-row-below-outlined class="aut-icon"></insert-row-below-outlined></div><div class="icon-text">InsertRowBelowOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('insert-row-left-outlined')"><div class="icon-icon"><insert-row-left-outlined class="aut-icon"></insert-row-left-outlined></div><div class="icon-text">InsertRowLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('insert-row-right-outlined')"><div class="icon-icon"><insert-row-right-outlined class="aut-icon"></insert-row-right-outlined></div><div class="icon-text">InsertRowRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('insurance-outlined')"><div class="icon-icon"><insurance-outlined class="aut-icon"></insurance-outlined></div><div class="icon-text">InsuranceOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('interaction-outlined')"><div class="icon-icon"><interaction-outlined class="aut-icon"></interaction-outlined></div><div class="icon-text">InteractionOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('key-outlined')"><div class="icon-icon"><key-outlined class="aut-icon"></key-outlined></div><div class="icon-text">KeyOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('laptop-outlined')"><div class="icon-icon"><laptop-outlined class="aut-icon"></laptop-outlined></div><div class="icon-text">LaptopOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('layout-outlined')"><div class="icon-icon"><layout-outlined class="aut-icon"></layout-outlined></div><div class="icon-text">LayoutOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('like-outlined')"><div class="icon-icon"><like-outlined class="aut-icon"></like-outlined></div><div class="icon-text">LikeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('line-outlined')"><div class="icon-icon"><line-outlined class="aut-icon"></line-outlined></div><div class="icon-text">LineOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('link-outlined')"><div class="icon-icon"><link-outlined class="aut-icon"></link-outlined></div><div class="icon-text">LinkOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('loading-3-quarters-outlined')"><div class="icon-icon"><loading-3-quarters-outlined class="aut-icon"></loading-3-quarters-outlined></div><div class="icon-text">Loading3QuartersOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('loading-outlined')"><div class="icon-icon"><loading-outlined class="aut-icon"></loading-outlined></div><div class="icon-text">LoadingOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('lock-outlined')"><div class="icon-icon"><lock-outlined class="aut-icon"></lock-outlined></div><div class="icon-text">LockOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('mac-command-outlined')"><div class="icon-icon"><mac-command-outlined class="aut-icon"></mac-command-outlined></div><div class="icon-text">MacCommandOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('mail-outlined')"><div class="icon-icon"><mail-outlined class="aut-icon"></mail-outlined></div><div class="icon-text">MailOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('man-outlined')"><div class="icon-icon"><man-outlined class="aut-icon"></man-outlined></div><div class="icon-text">ManOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('medicine-box-outlined')"><div class="icon-icon"><medicine-box-outlined class="aut-icon"></medicine-box-outlined></div><div class="icon-text">MedicineBoxOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('meh-outlined')"><div class="icon-icon"><meh-outlined class="aut-icon"></meh-outlined></div><div class="icon-text">MehOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('menu-outlined')"><div class="icon-icon"><menu-outlined class="aut-icon"></menu-outlined></div><div class="icon-text">MenuOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('merge-cells-outlined')"><div class="icon-icon"><merge-cells-outlined class="aut-icon"></merge-cells-outlined></div><div class="icon-text">MergeCellsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('message-outlined')"><div class="icon-icon"><message-outlined class="aut-icon"></message-outlined></div><div class="icon-text">MessageOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('mobile-outlined')"><div class="icon-icon"><mobile-outlined class="aut-icon"></mobile-outlined></div><div class="icon-text">MobileOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('money-collect-outlined')"><div class="icon-icon"><money-collect-outlined class="aut-icon"></money-collect-outlined></div><div class="icon-text">MoneyCollectOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('monitor-outlined')"><div class="icon-icon"><monitor-outlined class="aut-icon"></monitor-outlined></div><div class="icon-text">MonitorOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('more-outlined')"><div class="icon-icon"><more-outlined class="aut-icon"></more-outlined></div><div class="icon-text">MoreOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('node-collapse-outlined')"><div class="icon-icon"><node-collapse-outlined class="aut-icon"></node-collapse-outlined></div><div class="icon-text">NodeCollapseOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('node-expand-outlined')"><div class="icon-icon"><node-expand-outlined class="aut-icon"></node-expand-outlined></div><div class="icon-text">NodeExpandOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('node-index-outlined')"><div class="icon-icon"><node-index-outlined class="aut-icon"></node-index-outlined></div><div class="icon-text">NodeIndexOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('notification-outlined')"><div class="icon-icon"><notification-outlined class="aut-icon"></notification-outlined></div><div class="icon-text">NotificationOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('number-outlined')"><div class="icon-icon"><number-outlined class="aut-icon"></number-outlined></div><div class="icon-text">NumberOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('one-to-one-outlined')"><div class="icon-icon"><one-to-one-outlined class="aut-icon"></one-to-one-outlined></div><div class="icon-text">OneToOneOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('paper-clip-outlined')"><div class="icon-icon"><paper-clip-outlined class="aut-icon"></paper-clip-outlined></div><div class="icon-text">PaperClipOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('partition-outlined')"><div class="icon-icon"><partition-outlined class="aut-icon"></partition-outlined></div><div class="icon-text">PartitionOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pay-circle-outlined')"><div class="icon-icon"><pay-circle-outlined class="aut-icon"></pay-circle-outlined></div><div class="icon-text">PayCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('percentage-outlined')"><div class="icon-icon"><percentage-outlined class="aut-icon"></percentage-outlined></div><div class="icon-text">PercentageOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('phone-outlined')"><div class="icon-icon"><phone-outlined class="aut-icon"></phone-outlined></div><div class="icon-text">PhoneOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('picture-outlined')"><div class="icon-icon"><picture-outlined class="aut-icon"></picture-outlined></div><div class="icon-text">PictureOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('play-square-outlined')"><div class="icon-icon"><play-square-outlined class="aut-icon"></play-square-outlined></div><div class="icon-text">PlaySquareOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pound-circle-outlined')"><div class="icon-icon"><pound-circle-outlined class="aut-icon"></pound-circle-outlined></div><div class="icon-text">PoundCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pound-outlined')"><div class="icon-icon"><pound-outlined class="aut-icon"></pound-outlined></div><div class="icon-text">PoundOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('poweroff-outlined')"><div class="icon-icon"><poweroff-outlined class="aut-icon"></poweroff-outlined></div><div class="icon-text">PoweroffOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('printer-outlined')"><div class="icon-icon"><printer-outlined class="aut-icon"></printer-outlined></div><div class="icon-text">PrinterOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('profile-outlined')"><div class="icon-icon"><profile-outlined class="aut-icon"></profile-outlined></div><div class="icon-text">ProfileOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('project-outlined')"><div class="icon-icon"><project-outlined class="aut-icon"></project-outlined></div><div class="icon-text">ProjectOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('property-safety-outlined')"><div class="icon-icon"><property-safety-outlined class="aut-icon"></property-safety-outlined></div><div class="icon-text">PropertySafetyOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pull-request-outlined')"><div class="icon-icon"><pull-request-outlined class="aut-icon"></pull-request-outlined></div><div class="icon-text">PullRequestOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('pushpin-outlined')"><div class="icon-icon"><pushpin-outlined class="aut-icon"></pushpin-outlined></div><div class="icon-text">PushpinOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('qrcode-outlined')"><div class="icon-icon"><qrcode-outlined class="aut-icon"></qrcode-outlined></div><div class="icon-text">QrcodeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('read-outlined')"><div class="icon-icon"><read-outlined class="aut-icon"></read-outlined></div><div class="icon-text">ReadOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('reconciliation-outlined')"><div class="icon-icon"><reconciliation-outlined class="aut-icon"></reconciliation-outlined></div><div class="icon-text">ReconciliationOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('red-envelope-outlined')"><div class="icon-icon"><red-envelope-outlined class="aut-icon"></red-envelope-outlined></div><div class="icon-text">RedEnvelopeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('reload-outlined')"><div class="icon-icon"><reload-outlined class="aut-icon"></reload-outlined></div><div class="icon-text">ReloadOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('rest-outlined')"><div class="icon-icon"><rest-outlined class="aut-icon"></rest-outlined></div><div class="icon-text">RestOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('robot-outlined')"><div class="icon-icon"><robot-outlined class="aut-icon"></robot-outlined></div><div class="icon-text">RobotOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('rocket-outlined')"><div class="icon-icon"><rocket-outlined class="aut-icon"></rocket-outlined></div><div class="icon-text">RocketOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('rotate-left-outlined')"><div class="icon-icon"><rotate-left-outlined class="aut-icon"></rotate-left-outlined></div><div class="icon-text">RotateLeftOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('rotate-right-outlined')"><div class="icon-icon"><rotate-right-outlined class="aut-icon"></rotate-right-outlined></div><div class="icon-text">RotateRightOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('safety-certificate-outlined')"><div class="icon-icon"><safety-certificate-outlined class="aut-icon"></safety-certificate-outlined></div><div class="icon-text">SafetyCertificateOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('safety-outlined')"><div class="icon-icon"><safety-outlined class="aut-icon"></safety-outlined></div><div class="icon-text">SafetyOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('save-outlined')"><div class="icon-icon"><save-outlined class="aut-icon"></save-outlined></div><div class="icon-text">SaveOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('scan-outlined')"><div class="icon-icon"><scan-outlined class="aut-icon"></scan-outlined></div><div class="icon-text">ScanOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('schedule-outlined')"><div class="icon-icon"><schedule-outlined class="aut-icon"></schedule-outlined></div><div class="icon-text">ScheduleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('search-outlined')"><div class="icon-icon"><search-outlined class="aut-icon"></search-outlined></div><div class="icon-text">SearchOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('security-scan-outlined')"><div class="icon-icon"><security-scan-outlined class="aut-icon"></security-scan-outlined></div><div class="icon-text">SecurityScanOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('select-outlined')"><div class="icon-icon"><select-outlined class="aut-icon"></select-outlined></div><div class="icon-text">SelectOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('send-outlined')"><div class="icon-icon"><send-outlined class="aut-icon"></send-outlined></div><div class="icon-text">SendOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('setting-outlined')"><div class="icon-icon"><setting-outlined class="aut-icon"></setting-outlined></div><div class="icon-text">SettingOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('shake-outlined')"><div class="icon-icon"><shake-outlined class="aut-icon"></shake-outlined></div><div class="icon-text">ShakeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('share-alt-outlined')"><div class="icon-icon"><share-alt-outlined class="aut-icon"></share-alt-outlined></div><div class="icon-text">ShareAltOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('shop-outlined')"><div class="icon-icon"><shop-outlined class="aut-icon"></shop-outlined></div><div class="icon-text">ShopOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-cart-outlined')"><div class="icon-icon"><shopping-cart-outlined class="aut-icon"></shopping-cart-outlined></div><div class="icon-text">ShoppingCartOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-outlined')"><div class="icon-icon"><shopping-outlined class="aut-icon"></shopping-outlined></div><div class="icon-text">ShoppingOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('sisternode-outlined')"><div class="icon-icon"><sisternode-outlined class="aut-icon"></sisternode-outlined></div><div class="icon-text">SisternodeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('skin-outlined')"><div class="icon-icon"><skin-outlined class="aut-icon"></skin-outlined></div><div class="icon-text">SkinOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('smile-outlined')"><div class="icon-icon"><smile-outlined class="aut-icon"></smile-outlined></div><div class="icon-text">SmileOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('solution-outlined')"><div class="icon-icon"><solution-outlined class="aut-icon"></solution-outlined></div><div class="icon-text">SolutionOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('sound-outlined')"><div class="icon-icon"><sound-outlined class="aut-icon"></sound-outlined></div><div class="icon-text">SoundOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('split-cells-outlined')"><div class="icon-icon"><split-cells-outlined class="aut-icon"></split-cells-outlined></div><div class="icon-text">SplitCellsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('star-outlined')"><div class="icon-icon"><star-outlined class="aut-icon"></star-outlined></div><div class="icon-text">StarOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('subnode-outlined')"><div class="icon-icon"><subnode-outlined class="aut-icon"></subnode-outlined></div><div class="icon-text">SubnodeOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('switcher-outlined')"><div class="icon-icon"><switcher-outlined class="aut-icon"></switcher-outlined></div><div class="icon-text">SwitcherOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('sync-outlined')"><div class="icon-icon"><sync-outlined class="aut-icon"></sync-outlined></div><div class="icon-text">SyncOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('table-outlined')"><div class="icon-icon"><table-outlined class="aut-icon"></table-outlined></div><div class="icon-text">TableOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('tablet-outlined')"><div class="icon-icon"><tablet-outlined class="aut-icon"></tablet-outlined></div><div class="icon-text">TabletOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('tag-outlined')"><div class="icon-icon"><tag-outlined class="aut-icon"></tag-outlined></div><div class="icon-text">TagOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('tags-outlined')"><div class="icon-icon"><tags-outlined class="aut-icon"></tags-outlined></div><div class="icon-text">TagsOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('team-outlined')"><div class="icon-icon"><team-outlined class="aut-icon"></team-outlined></div><div class="icon-text">TeamOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('thunderbolt-outlined')"><div class="icon-icon"><thunderbolt-outlined class="aut-icon"></thunderbolt-outlined></div><div class="icon-text">ThunderboltOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('to-top-outlined')"><div class="icon-icon"><to-top-outlined class="aut-icon"></to-top-outlined></div><div class="icon-text">ToTopOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('tool-outlined')"><div class="icon-icon"><tool-outlined class="aut-icon"></tool-outlined></div><div class="icon-text">ToolOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('trademark-circle-outlined')"><div class="icon-icon"><trademark-circle-outlined class="aut-icon"></trademark-circle-outlined></div><div class="icon-text">TrademarkCircleOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('trademark-outlined')"><div class="icon-icon"><trademark-outlined class="aut-icon"></trademark-outlined></div><div class="icon-text">TrademarkOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('transaction-outlined')"><div class="icon-icon"><transaction-outlined class="aut-icon"></transaction-outlined></div><div class="icon-text">TransactionOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('translation-outlined')"><div class="icon-icon"><translation-outlined class="aut-icon"></translation-outlined></div><div class="icon-text">TranslationOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('trophy-outlined')"><div class="icon-icon"><trophy-outlined class="aut-icon"></trophy-outlined></div><div class="icon-text">TrophyOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('ungroup-outlined')"><div class="icon-icon"><ungroup-outlined class="aut-icon"></ungroup-outlined></div><div class="icon-text">UngroupOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('unlock-outlined')"><div class="icon-icon"><unlock-outlined class="aut-icon"></unlock-outlined></div><div class="icon-text">UnlockOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('upload-outlined')"><div class="icon-icon"><upload-outlined class="aut-icon"></upload-outlined></div><div class="icon-text">UploadOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('usb-outlined')"><div class="icon-icon"><usb-outlined class="aut-icon"></usb-outlined></div><div class="icon-text">UsbOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('user-add-outlined')"><div class="icon-icon"><user-add-outlined class="aut-icon"></user-add-outlined></div><div class="icon-text">UserAddOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('user-delete-outlined')"><div class="icon-icon"><user-delete-outlined class="aut-icon"></user-delete-outlined></div><div class="icon-text">UserDeleteOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('user-outlined')"><div class="icon-icon"><user-outlined class="aut-icon"></user-outlined></div><div class="icon-text">UserOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('user-switch-outlined')"><div class="icon-icon"><user-switch-outlined class="aut-icon"></user-switch-outlined></div><div class="icon-text">UserSwitchOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('usergroup-add-outlined')"><div class="icon-icon"><usergroup-add-outlined class="aut-icon"></usergroup-add-outlined></div><div class="icon-text">UsergroupAddOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('usergroup-delete-outlined')"><div class="icon-icon"><usergroup-delete-outlined class="aut-icon"></usergroup-delete-outlined></div><div class="icon-text">UsergroupDeleteOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('verified-outlined')"><div class="icon-icon"><verified-outlined class="aut-icon"></verified-outlined></div><div class="icon-text">VerifiedOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('video-camera-add-outlined')"><div class="icon-icon"><video-camera-add-outlined class="aut-icon"></video-camera-add-outlined></div><div class="icon-text">VideoCameraAddOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('video-camera-outlined')"><div class="icon-icon"><video-camera-outlined class="aut-icon"></video-camera-outlined></div><div class="icon-text">VideoCameraOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('wallet-outlined')"><div class="icon-icon"><wallet-outlined class="aut-icon"></wallet-outlined></div><div class="icon-text">WalletOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('whats-app-outlined')"><div class="icon-icon"><whats-app-outlined class="aut-icon"></whats-app-outlined></div><div class="icon-text">WhatsAppOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('wifi-outlined')"><div class="icon-icon"><wifi-outlined class="aut-icon"></wifi-outlined></div><div class="icon-text">WifiOutlined</div></div>
		<div class="icon-cell" @click="clickIcon('woman-outlined')"><div class="icon-icon"><woman-outlined class="aut-icon"></woman-outlined></div><div class="icon-text">WomanOutlined</div></div>
	</div>
	
	
</div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		iconIndex: "search",
		
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	confirm4(){
		antd.Modal.confirm({
			title: 'Confirm',
			// icon: createVNode(ExclamationCircleOutlined),
			// icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
			// icon: Vue.createVNode(DiyIconsVue.AddLocation, {class: "aut-icon"}),
			icon: Vue.createVNode(AntdIconsVue.AccountBookFilled, {class: "aut-icon"}),
			content: 'Bla bla ...',
			okText: '确认',
			cancelText: '取消',
			maskClosable: true,
		});
	},
	clickIcon(icon) {
		this.iconIndex = icon;
		// console.log(icon)
	},
	
	
},
computed:{
	iconDemo(){
		return `<${this.iconIndex} class="aut-icon"></${this.iconIndex}>`;
	}
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(DiyIconsVue)) {app.component(key, component)};
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");

// console.log(Object.keys(window));
// console.log(DiyIconsVue);
// console.log(AntdIconsVue);

// 如果从网站上获取：
// https://www.antdv.com/components/icon-cn/
// 线框风格==================================================  ==================================================
// document.getElementsByClassName('anticons-list')[3].children[0].lastChild.children[0].textContent		//'AreaChartOutlined'
// document.getElementsByClassName('anticons-list')[0].children[0].firstChild.firstChild.children[0].attributes.d.value		'M512 140c-205.4 0-372 166.6...'
//获取第一个ul下的所有icon数据：“线框风格”
// let n = 0;
// let arr_li = document.getElementsByClassName("anticons-list")[n].children;
// let ret = '';
// for(var li in arr_li){
// 	if(typeof arr_li[li] == 'object'){
// 		let name = arr_li[li].lastChild.children[0].textContent;
// 		let paths = arr_li[li].firstChild.firstChild.children;
// 		let str1 = `${name}: [`;
// 		let str2 = '';
// 		for(var path in paths){
// 			if(typeof paths[path] == 'object'){
// 				let fill = 'currentColor';
// 				let d_n = paths[path].attributes.d;
// 				if(d_n == undefined){
// 					continue;
// 				}
// 				let d = d_n.value;
// 				str2 = `${str2}
// 	{fill: "${fill}", d: "${d}"},`;
// 			}
// 		}
// 		let one_icon = `${str1}${str2.slice(0, -1)}
// ],`;
// 		ret = `${ret}
// ${one_icon}`;
// 	}
// }
// console.log(ret);

//获取第一个ul下的所有icon名称（转换为横杠方式）：“线框风格”
// let n = 0;
// let arr_li = document.getElementsByClassName("anticons-list")[n].children;
// function to_bar_name(str) {
// 	let result = '';for (let i = 0; i < str.length; i++) {const char = str[i];if (char === char.toUpperCase() && i !== 0) {result += '-';}result += char.toLowerCase();}
// 	return result;
// }
// let ret = '';
// for(var li in arr_li){
// 	if(typeof arr_li[li] == 'object'){
// 		let name = arr_li[li].lastChild.children[0].textContent;
// 		let name_bar = to_bar_name(name);
// 		ret = `${ret}
// <div class="icon-cell" @click="clickIcon('${name_bar}')"><div class="icon-icon"><${name_bar} class="aut-icon"></${name_bar}></div><div class="icon-text">${name}</div></div>`;
// 	}
// }
// console.log(ret);

</script>
</html>
